import { Autobind, Component, VueComponent, Mut, Hook, Link } from 'vue3-oop'
import {NCard,NGrid,NGi,NStatistic } from 'naive-ui'
import { nicon } from '@/utils/IconUtil';
import * as echarts from 'echarts';

@Component()
export default class HomeView extends VueComponent {
  constructor(

  ) {
    super()
  }

  @Mut() state = {
    definition: 0,
    process: 0,
    todoTask: 0,
    finishTask: 0
  }

  private loadData=()=>{
    window.$http.get("/api/index/statistic/data").then(({data:responseBody})=>{
      if(responseBody.success){
        const { record } = responseBody;
        this.state.definition = record.definition;
        this.state.process = record.process;
        this.state.todoTask = record.todoTask;
        this.state.finishTask = record.finishTask;

        this.chartInstance?.setOption({
          series: [
            {
              name: '数量',
              type: 'bar',
              data: [record.definition,record.process,record.todoTask,record.finishTask]
            }
          ]
        });
        this.chartInstance2?.setOption({
          series: [
            {
              type: 'pie',
              data: [
                {name:'待办任务',value:record.todoTask},
                {name:'已办任务',value:record.finishTask}
              ]
            }
          ]
        });
      }
    }).catch((error)=>{
      console.error(error);
    })
  }

  @Link()
  private chartCanvas?:HTMLElement;
  private chartInstance?:echarts.EChartsType;

  @Link()
  private chartCanvas2?:HTMLElement;
  private chartInstance2?:echarts.EChartsType;

  private loadChart=()=>{
    if(this.chartCanvas){
      this.chartInstance = echarts.init(this.chartCanvas);
      this.chartInstance.setOption({
        title: {
          text: '流程统计'
        },
        tooltip: {},
        xAxis: {
          data: ['流程定义', '流程实例', '待办任务', '已办任务']
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'bar',
            data: [0,0,0,0]
          }
        ]
      });
    }
    if(this.chartCanvas2){
      this.chartInstance2 = echarts.init(this.chartCanvas2);
      this.chartInstance2.setOption({
        title: {
          text: '任务统计'
        },
        tooltip: {},
      });
    }
  }


  @Hook('Mounted')
  onMounted(){
    this.loadData();
    this.loadChart();
  }

  render() {
    return (
      <NCard
        contentStyle={{padding:'10px'}}
      >
        <NGrid cols={1} xGap={10} yGap={10}>
          <NGi>
            <NCard
              title={"统计数据"}
            >
              <NGrid
                cols={4}
              >
                <NGi>
                  <NStatistic
                    label={"流程定义"}
                    value={`${this.state.definition}`}
                  >
                    {{
                      prefix: nicon('DocumentFlowchart20Filled'),
                      suffix: ()=>''
                    }}
                  </NStatistic>
                </NGi>
                <NGi>
                  <NStatistic
                    label={"流程实例"}
                    value={`${this.state.process}`}
                  >
                    {{
                      prefix: nicon('Flow16Filled'),
                      suffix: ()=>''
                    }}
                  </NStatistic>
                </NGi>
                <NGi>
                  <NStatistic
                    label={"待办任务"}
                    value={`${this.state.todoTask}`}
                  >
                    {{
                      prefix: nicon('ClipboardBulletListLtr20Filled'),
                      suffix: ()=>''
                    }}
                  </NStatistic>
                </NGi>
                <NGi>
                  <NStatistic
                    label={"已办任务"}
                    value={`${this.state.finishTask}`}
                  >
                    {{
                      prefix: nicon('ClipboardTask20Filled'),
                      suffix: ()=>''
                    }}
                  </NStatistic>
                </NGi>
              </NGrid>
            </NCard>
          </NGi>
          <NGi>
            <NCard
              title={"统计图表"}
            >
              <NGrid cols={2} xGap={10} yGap={10}>
                <NGi><div style={{height:'300px'}} ref="chartCanvas" /></NGi>
                <NGi><div style={{height:'300px'}} ref="chartCanvas2"/></NGi>
              </NGrid>
            </NCard>
          </NGi>
        </NGrid>
      </NCard>
    )
  }
}
